iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1
自我挑戰組

網頁學習日誌系列 第 3 篇

CSS : display屬性-區塊和行內元素差異

2018鐵人賽
9084 瀏覽

  • 分享至 

  • xImage
    •  

diplay區塊和行內屬性表格分析：

block(區塊元素) inline(行內元素) inline-block
差異 將整行容器空間占滿，所以會分行排列 與文字段落同行排列 效果同於float，同時具有block(區塊)和inline(行內)屬性
影響範圍 整行都可以點到 元素範圍以外點不到 元素範圍以外點不到
使用地方 使用手機點選按鈕、選單等需大範圍感應區域的元素 a連結 元素並排

block: 區塊將整行空間占滿，後面元素往下行排

https://ithelp.ithome.com.tw/upload/images/20200411/20107321vh1DfsY2pp.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321OdbNnZRHGI.png

inline：同行排列

https://ithelp.ithome.com.tw/upload/images/20200411/20107321alTJSeSiK8.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321NA8bm2aQWc.png

display屬性 最常用在 ul li 清單項目，ul li預設都為block所以都會分行排列

https://ithelp.ithome.com.tw/upload/images/20200411/20107321CwtIYmaUdi.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321skOmjUSHmd.png

所以如果要讓li並排，只要設定li為display:inline 或是 inline-block，ul 和 li都可在同行顯示，但是ul仍然還是區塊元素(block)。

https://ithelp.ithome.com.tw/upload/images/20200411/2010732146fIbahRme.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321htGmK3snVv.png


上一篇
CSS : position 絕對定位與相對定位
下一篇
CSS : 網頁排版要注意的Box Model（盒模型）
系列文
網頁學習日誌 共 30 篇
  1. 26
    API ： Google Maps API 設定(2)地圖標記
  2. 27
    API ： Google Maps API 設定(3)新增多個標記
  3. 28
    API ： Google Maps API 設定(4) js+json 標記 wifi 熱點
  4. 29
    Flex：春聯
  5. 30
    Flex ： Bootstrap 4 Flex 網格
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19628 篇
完賽人數
530 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙